<template>
	<view>
		<view class="search">
			<view class="search-left" hover-class="btn-hover" @click="onToggleStore">
				<view class="search-city u-line-2">{{ storeNameInner }}</view>
				<view class="search-arrow" :class="{'arrow-active': showStore}" v-if="mainStore">
					<u-icon name="play-left-fill" color="#0E94FC" size="20rpx"></u-icon>
				</view>
			</view>
			
			<view class="search-divider"></view>
			
			<u-search
				v-model="keyword"  
				bgColor="#fff"
				searchIconColor="#999" 
				searchIconSize="40rpx" 
				:inputStyle="{'font-size': '28rpx'}" 
				:actionStyle="{'font-size': '28rpx', 'width': '80rpx'}"
				placeholderColor="#999" 
				placeholder="名称/货号/关键词" 
				@clear="handleSearch"
				@search="handleSearch" 
				@custom="handleSearch" 
			></u-search>
		</view>
		
		<!-- 选择门店 -->
		<u-picker
			:show="showStore" 
			:columns="[storeList]" 
			itemHeight="88" 
			title="选择门店" 
			keyName="storeName" 
			closeOnClickOverlay 
			confirmColor="#13a0e7" 
			@close="onToggleStore" 
			@cancel="onToggleStore" 
			@confirm="onStoreConfirm"
		></u-picker>
	</view>
</template>

<script>
	export default {
		props: {
			storeName: String,
			storeList: {
				type: Array,
				default: () => []
			},
			// 是否是总店
			mainStore: Boolean,
		},
		data() {
			return {
				keyword: '',
				
				showStore: false,
				storeNameInner: this.storeName,
			}
		},
		watch: {
			storeName(name) {
				this.storeNameInner = name
			},
		},
		methods: {
			// 显示门店
			onToggleStore() {
				if (!this.mainStore) return
				this.showStore = !this.showStore
			},
			// 选择门店
			onStoreConfirm(event) {
				this.storeNameInner = event.value[0].storeName
				this.$emit('storechange', event.value[0])
				this.onToggleStore()
			},
			// 搜索
			handleSearch(value) {
				this.$emit('search', value ?? '')
			},
		}
	}
</script>

<style lang="scss" scoped>
	$searchHeight: 88rpx;
	
	.search {
		height: $searchHeight;
		padding: 0 20rpx;
		border-radius: calc(#{$searchHeight} / 2);
		background-color: #fff;
		display: flex;
		.search-left {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			.search-city {
				max-width: 160rpx;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 1.2;
				color: $u-primary;
				text-align: center;
			}
			.search-arrow {
				margin-left: 10rpx;
				transform: rotate(-90deg);
				transition: transform 0.2s;
			}
			.arrow-active.search-arrow {
				transform: rotate(90deg);
			}
		}
		&-divider {
			width: 1px;
			height: 40rpx;
			background-color: $u-border-color;
			margin-top: calc((#{$searchHeight} - 40rpx) / 2);
		}
	}
</style>